<script setup lang="ts" name="fund">
import Overview from './components/Overview.vue';
import Recharge from './components/Recharge.vue';
import Withdraw from './components/Withdraw.vue';
import Teams from './components/Teams.vue';
import { useRoute } from 'vue-router';
import { ref } from 'vue';
const { query } = useRoute();
const tabsActive = ref(0);
if (query.fundType === 'deposit') {
  tabsActive.value = 1;
} else if (query.fundType === 'withdraw') {
  tabsActive.value = 2;
}
</script>
<template>
  <div class="fund">
    <AppBar :primary="true" :title="$t('Fund')"></AppBar>
    <div class="tabs">
      <van-tabs  v-model:active="tabsActive">
        <van-tab :title="$t('Overview')">
          <Overview></Overview>
        </van-tab>
        <van-tab :title="$t('Deposit')">
          <Recharge></Recharge>
        </van-tab>
        <van-tab :title="$t('Withdraw')">
          <Withdraw></Withdraw>
        </van-tab>
        <van-tab :title="$t('Teams')">
          <Teams></Teams>
        </van-tab>
      </van-tabs>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.fund {
  .tabs {
    padding: 0 30px;
  }
}
</style>
<style lang="scss">
.fund {
  height: 100vh;
  .tabs {
    .van-tabs__nav {
      overflow-x: auto;
      background: $body;
    }

    .van-tabs__nav--line {
      padding-bottom: 0;
    }

    .van-tab {
      font-weight: normal;
      background: #242424;
      height: 68px;
      min-width: auto;
      border-radius: 34px;
      margin-right: 23px;
      margin-top: 5px;
      font-size: 27px;
      padding: 0 25px;
      color: rgb(93, 97, 102);
    }

    .van-tabs__line {
      display: none;
    }

    .van-tab--active {
      background: rgb(0, 99, 245);
      color: #fff;
    }
  }
}
</style>
